<template>
  <div class="dashboard-editor-container">
    <div class="chart-wrapper1">
      <el-row  :gutter="10">
        <el-col :span="6" style="padding-top:6px">
          组织对象：
          <el-radio v-model="radio1" label="1" style="color:#2ca7e9">坐席</el-radio>
          <el-radio v-model="radio1" label="2" style="color:#2ca7e9">队列</el-radio>
        </el-col>
        <el-col :span="10" style="padding-top:6px">
          统计粒度:
          <el-radio-group v-model="switch1">
            <el-radio :label="1">日</el-radio>
            <el-radio :label="2">周</el-radio>
            <el-radio :label="3">月</el-radio>
            <el-radio :label="4">季</el-radio>
            <el-radio :label="5">年</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="8" style="padding-top:0px">
          基准日:<el-date-picker v-model="baseDay" value-format="yyyyMMdd" type="date" size="mini"></el-date-picker>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;padding-right: 20px;margin-bottom: 20px;">
        <el-col :span="8" >
          组织范围：
            <el-button size="mini"  plain  type="primary">陈晓明</el-button>  
            <el-button  size="mini"  plain type="primary">洛阳</el-button>                        
            <el-button  plain size="mini"  type="primary">客户线呼入</el-button>
          <!-- </el-radio-group> -->
        </el-col>
        <el-col :span="5">
            <el-button  size="mini"  plain style="color:#2ca7e9; padding: 1px 8px;">重置</el-button>                        
              <el-button  plain size="mini"  style="color:#2ca7e9; padding: 1px 8px;">确定</el-button>
        </el-col>
      </el-row> 
      <el-form size="mini"  label-position="left" :inline="true" style="padding-left: 58px;">
      <el-form-item >
        <el-col :span="8" >
          <select-tree    :single-check="true" v-model="branchId" showText="行政" style="width:170px;" :props='{id:"orgno",label: "cname",children: "children"}' :tree-data="brnoList"  placeholder="请选择机构"></select-tree>
        </el-col>
      </el-form-item>
      <el-form-item >
        <el-col :span="8">
          <select-tree   :single-check="true" v-model="branchId"  showText="地区" style="width:170px;" :props='{id:"orgno",label: "cname",children: "children"}' :tree-data="brnoList1"  placeholder="请选择机构"></select-tree>
        </el-col>
      </el-form-item>
      <el-form-item  >
        <el-col :span="8">
        <select-tree  :single-check="true" v-model="branchId"  showText="业务"  style="width:170px;" :props='{id:"orgno",label: "cname",children: "children"}' :tree-data="brnoList2"  placeholder="请选择机构"></select-tree>
        </el-col>
      </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10">
    </el-row>
    <!-- <el-tabs v-model="activeName2" type="border-card" style="padding-left: 20px; width: 100%" @tab-click="handleClick">
    <el-tab-pane label="任务管理" name="first"></el-tab-pane>
    <el-tab-pane label="趋势分析" name="second">
      
    </el-tab-pane>
    <el-tab-pane label="相关指标对比分析" name="third">相关指标对比分析</el-tab-pane>
  </el-tabs> -->
  <el-row :gutter="10" style="padding-left: 20px">
    <el-col :span="18" style="float: left;">
      <el-radio-group v-model="activeName2" @change="handleClick">
        <el-radio-button label="first">任务管理</el-radio-button>
        <el-radio-button label="second">趋势分析</el-radio-button>
        <el-radio-button label="third">相关指标对比分析</el-radio-button>
    </el-radio-group>
    </el-col>
    <el-col :span="4" style="float: right;">
      <el-select v-model="analysisFlag" filterable placeholder="请选择分析指标" size="mini">
        <el-option
          v-for="item in analysisFlagList"
          :key="item.value"  
          :label="item.name" 
          :value="item.value"
        ></el-option>
      </el-select>
    </el-col>
    <el-col :span="2" style="float: right;"><el-button style="color:#000" size="mini" type="text" disabled>分析指标 :</el-button></el-col>
  </el-row>
  <el-row class="main" style="padding-left: 20px;" v-show="this.activeName2=='second'">
    <el-col :span="24">
      <el-card>
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">平均处理时长-及其相关性指标趋势</el-button>
        </div>
        <div>
          <div class="myHexagon1" ref="myHexagon"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="padding-left: 20px;" class="main" v-show="this.activeName2=='second'">
    <el-col :span="24">
      <el-card>
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">人员分布</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="detail">详情>></el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="9" class="left-col" style="margin-top: 0px;" >
      <el-card>
        <div class="clearfix" slot="header">
          <el-button style="float: left; padding: 3px 0" type="text">平均处理时长</el-button>
        </div>
        <div>
          <div class="myHexagon" ref="myChart"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="15" style="font-size: 12px">
      <el-card>
        <!-- <div > -->
        <div style="margin-top: 0px; height: 100%" slot="header">
          <div class="clearfix">
            <el-button style="float: left; padding: 3px 0" type="text">寿险》洛阳》第一团队</el-button>
          </div>
          <div style="float: left;" class="radio_show">
            <span>&nbsp;&nbsp;&nbsp;显示内容:</span>
            <el-radio-group v-model="switch2" size="mini">
              <el-radio :label="1">AHT</el-radio>
              <el-radio :label="2">人数</el-radio>
            </el-radio-group>
            <span v-if="switch2=='2'">&nbsp;&nbsp;&nbsp;人员筛选:</span>
            <el-radio-group v-if="switch2=='2'" v-model="switch3" size="mini" @change="handleClick1">
              <el-radio :label="1">全部</el-radio>
              <el-radio :label="2">已达标</el-radio>
              <el-radio :label="3">未达标</el-radio>

            </el-radio-group>
            <span>&nbsp;&nbsp;&nbsp; 对象粒度:</span>
            <el-radio-group v-model="switch1" size="mini" style="float: right;">
              <el-radio :label="3">业务</el-radio>
              <el-radio :label="6">地区</el-radio>
              <el-radio :label="9">行政</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- </div> -->
        <div v-if="switch3=='1'">
          <div class="myHexagon" ref="myChart1"></div>
        </div>
        <div v-if="switch3=='2'">
          <div class="myHexagon" ref="myChart11"></div>
        </div>
        <div v-if="switch3=='3'">
          <div class="myHexagon" ref="myChart12"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row class="main" style="padding-left: 20px;" v-show="this.activeName2=='third'">
    <el-col :span="24">
      <el-card>
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">平均处理时长-及其相关性指标趋势</el-button>
        </div>
        <div>
          <div class="myHexagon1" ref="myChart2"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="padding-left: 20px;" class="main" v-show="this.activeName2=='third'">
    <el-col :span="24">
      <el-card>
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">人员分布</el-button>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">详情>></el-button> -->
        </div>
      </el-card>
    </el-col>
    <el-col :span="9" class="left-col" style="margin-top: 0px;" >
      <el-card>
        <div class="clearfix" slot="header">
          <el-button style="float: left; padding: 3px 0" type="text">平均处理时长</el-button>
          <el-button style="float: right; padding: 3px 0" type="text">详情>></el-button>
        </div>
        <div>
          <div class="myHexagon" ref="myChart3"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="15" class="left-col" style="margin-top: 0px;">
      <el-card>
        <div style="margin-top: 0px; height: 100%" slot="header">
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">寿险》洛阳》第一团队</el-button>
        </div>
        <div style="float: left; font-size: 10px" class="radio_show">
          <span>&nbsp;&nbsp;&nbsp;显示内容:</span>
            <el-radio-group v-model="switch2" size="mini">
              <el-radio :label="1">AHT</el-radio>
              <el-radio :label="2">人数</el-radio>
            </el-radio-group>
            <span v-if="switch2=='2'">&nbsp;&nbsp;&nbsp;人员筛选:</span>
            <el-radio-group v-if="switch2=='2'" v-model="switch4" size="mini" @change="handleClick2">
              <el-radio :label="1">全部</el-radio>
              <el-radio :label="2">已达标</el-radio>
              <el-radio :label="3">未达标</el-radio>

            </el-radio-group>
            <span>&nbsp;&nbsp;&nbsp; 对象粒度:</span>
            <el-radio-group v-model="switch1" size="mini" style="float: right;">
              <el-radio :label="3">业务</el-radio>
              <el-radio :label="6">地区</el-radio>
              <el-radio :label="9">行政</el-radio>
            </el-radio-group>
        </div>
        </div>
        <div v-if="switch4=='1'">
          <!-- <div class="myHexagon" ref="myChart1"></div> -->
          <div class="myHexagon" ref="myChart4"></div>
        </div>
        <div v-if="switch4=='2'">
          <div class="myHexagon" ref="myChart11"></div>
        </div>
        <div v-if="switch4=='3'">
          <div class="myHexagon" ref="myChart12"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="padding-left: 20px;" class="main" v-show="this.activeName2=='third'">
    <el-col :span="9" class="left-col" style="margin-top: 0px;" >
      <el-card>
        <div class="clearfix" slot="header">
          <el-button style="float: left; padding: 3px 0" type="text">平均通话时长</el-button>
          <el-button style="float: right; padding: 3px 0" type="text">详情>></el-button>
        </div>
        <div>
          <div class="myHexagon" ref="myChart5"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="15" class="left-col" style="margin-top: 0px;">
      <el-card>
        <div style="margin-top: 0px; height: 100%" slot="header">
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">寿险》洛阳》第一团队</el-button>
        </div>
        <div style="float: left; font-size: 10px" class="radio_show">
          <span>&nbsp;&nbsp;&nbsp;显示内容:</span>
            <el-radio-group v-model="switch2" size="mini">
              <el-radio :label="1">AHT</el-radio>
              <el-radio :label="2">人数</el-radio>
            </el-radio-group>
            <span v-if="switch2=='2'">&nbsp;&nbsp;&nbsp;人员筛选:</span>
            <el-radio-group v-if="switch2=='2'" v-model="switch5" size="mini" @change="handleClick3">
              <el-radio :label="1">全部</el-radio>
              <el-radio :label="2">已达标</el-radio>
              <el-radio :label="3">未达标</el-radio>

            </el-radio-group>
            <span>&nbsp;&nbsp;&nbsp; 对象粒度:</span>
            <el-radio-group v-model="switch1" size="mini" style="float: right;">
              <el-radio :label="3">业务</el-radio>
              <el-radio :label="6">地区</el-radio>
              <el-radio :label="9">行政</el-radio>
            </el-radio-group>
        </div>
        </div>
        <div v-if="switch5=='1'">
          <div class="myHexagon" ref="myChart6"></div>
        </div>
        <div v-if="switch5=='2'">
          <div class="myHexagon" ref="myChart11"></div>
        </div>
        <div v-if="switch5=='3'">
          <div class="myHexagon" ref="myChart12"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="padding-left: 20px;" class="main" v-show="this.activeName2=='third'">
    <el-col :span="9" class="left-col" style="margin-top: 0px;" >
      <el-card>
        <div class="clearfix" slot="header">
          <el-button style="float: left; padding: 3px 0" type="text">平均案面处理时长</el-button>
          <el-button style="float: right; padding: 3px 0" type="text">详情>></el-button>
        </div>
        <div>
          <div class="myHexagon" ref="myChart7"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="15" class="left-col" style="margin-top: 0px;">
      <el-card>
        <div style="margin-top: 0px; height: 100%" slot="header">
        <div class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text">寿险》洛阳》第一团队</el-button>
        </div>
        <div style="float: left; font-size: 10px" class="radio_show">
          <span>&nbsp;&nbsp;&nbsp;显示内容:</span>
            <el-radio-group v-model="switch2" size="mini">
              <el-radio :label="1">AHT</el-radio>
              <el-radio :label="2">人数</el-radio>
            </el-radio-group>
            <span v-if="switch2=='2'">&nbsp;&nbsp;&nbsp;人员筛选:</span>
            <el-radio-group v-if="switch2=='2'" v-model="switch6" size="mini" @change="handleClick4">
              <el-radio :label="1">全部</el-radio>
              <el-radio :label="2">已达标</el-radio>
              <el-radio :label="3">未达标</el-radio>

            </el-radio-group>
            <span>&nbsp;&nbsp;&nbsp; 对象粒度:</span>
            <el-radio-group v-model="switch1" size="mini" style="float: right;">
              <el-radio :label="3">业务</el-radio>
              <el-radio :label="6">地区</el-radio>
              <el-radio :label="9">行政</el-radio>
            </el-radio-group>
        </div>
        </div>
        <div v-if="switch6=='1'">
          <div class="myHexagon" ref="myChart8"></div>
        </div>
        <div v-if="switch6=='2'">
          <div class="myHexagon" ref="myChart11"></div>
        </div>
        <div v-if="switch6=='3'">
          <div class="myHexagon" ref="myChart12"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <keep-alive>
    <component :is="dialogList.siteRanking" :option="dialogOptionsB" ></component>
  </keep-alive>
  </div>
</template>

<script>
import siteRanking from "./dialog/siteRanking";
import selectTree from "@/components/selectTree4/";
import echarts from 'echarts';
import toolBox from "@/common/utils/toolBox";
// import siteTendency from "./dialog/siteTendency";
// import agentList from "./dialog/agentList";
// import siteRanking from "./dialog/siteRanking";

export default {
  name: '',
  components: {
    selectTree
  },
  data() {
    return {
      radio1: "",
      switch1: "",
      baseDay: "",
      branchId: [],
      switch2: 2,
      switch3: 1,
      switch4: 1,
      switch5: 1,
      switch6: 1,
      activeName2: "second",
      analysisFlag: "",
      dialogList: {
        siteRanking,
      },
      dialogOptionsB:{
        isShow: false
      },
      analysisFlagList: [{name: "AHT", value: "AHT"}],
      brnoList: [
            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80999",bName: "产险客服中心",cname: "产险客服中心",attr: "0"},
            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02001",bName: "池慕营团队",cname: "池慕营团队",attr: "1"},
            {superno: "02001",sdate: "20110101",lvl: "3",orgno: "02011",bName: "（LY）客户呼入吴川宜组",cname: "（LY）客户呼入吴川宜组",attr: "1"},
            {superno: "02001",sdate: "20110101",lvl: "3",orgno: "02021",bName: "（LY）客户呼入曾维花组",cname: "（LY）客户呼入曾维花组",attr: "1"},
            {superno: "02001",sdate: "20110101",lvl: "3",orgno: "02031",bName: "（LY）客户呼入王丹河组",cname: "（LY）客户呼入王丹河组",attr: "1"},
            
            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02002",bName: "章珊团队",cname: "章珊团队",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02012",bName: "（LY）客户呼入刘奇组",cname: "（LY）客户呼入刘奇组",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02022",bName: "（LY）客户呼入张善组",cname: "（LY）客户呼入张善组",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02032",bName: "（LY）客户呼入李斯组",cname: "（LY）客户呼入李斯组",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02042",bName: "（LY）客户呼入王武组",cname: "（LY）客户呼入王武组",attr: "1"},

            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02003",bName: "赵铭团队",cname: "赵铭团队",attr: "0"},
            {superno: "02003",sdate: "20110101",lvl: "3",orgno: "02041",bName: "（LY）客户呼入石敏齐组",cname: "（LY）客户呼入石敏齐组",attr: "1"},
            {superno: "02003",sdate: "20110101",lvl: "3",orgno: "02051",bName: "（LY）客户呼入贺易组",cname: "（LY）客户呼入贺易组",attr: "1"},
            {superno: "02003",sdate: "20110101",lvl: "3",orgno: "02061",bName: "（LY）客户呼入车亚忠组",cname: "（LY）客户呼入车亚忠组",attr: "1"},

            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02004",bName: "郑欣团队",cname: "郑欣团队",attr: "0"},
            {superno: "02004",sdate: "20110101",lvl: "3",orgno: "02052",bName: "（LY）客户呼入赵林组",cname: "（LY）客户呼入赵林组",attr: "1"},
            {superno: "02004",sdate: "20110101",lvl: "3",orgno: "02062",bName: "（LY）客户呼入赵铭组",cname: "（LY）客户呼入赵刚组",attr: "1"},
            {superno: "02004",sdate: "20110101",lvl: "3",orgno: "02072",bName: "（LY）客户呼入钱丽组",cname: "（LY）客户呼入钱丽组",attr: "1"},

            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80998",bName: "信用卡客服中心",cname: "信用卡客服中心",attr: "0"},
            {superno: "80998",sdate: "20110101",lvl: "2",orgno: "03001",bName: "关誉团队",cname: "关誉团队",attr: "1"},
            {superno: "03001",sdate: "20110101",lvl: "3",orgno: "03011",bName: "（LY）客户呼入吴川宜组",cname: "（LY）客户呼入于仲组",attr: "1"},
            {superno: "03001",sdate: "20110101",lvl: "3",orgno: "03021",bName: "（LY）客户呼入曾维花组",cname: "（LY）客户呼入元里夕组",attr: "1"},
            {superno: "03001",sdate: "20110101",lvl: "3",orgno: "03031",bName: "（LY）客户呼入王丹河组",cname: "（LY）客户呼入夏两赢组",attr: "1"},
            
            {superno: "80998",sdate: "20110101",lvl: "2",orgno: "03002",bName: "曾流白团队",cname: "曾流白团队",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03012",bName: "（LY）客户呼入刘奇组",cname: "（LY）客户呼入孙峰组",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03022",bName: "（LY）客户呼入张善组",cname: "（LY）客户呼入文秋组",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03032",bName: "（LY）客户呼入王康组",cname: "（LY）客户呼入王康组",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03042",bName: "（LY）客户呼入流川枫组",cname: "（LY）客户呼入流川枫组",attr: "1"},

            {superno: "80998",sdate: "20110101",lvl: "2",orgno: "03003",bName: "任怡旭团队",cname: "任怡旭团队",attr: "0"},
            {superno: "03003",sdate: "20110101",lvl: "3",orgno: "03041",bName: "（LY）客户呼入大龙猫组",cname: "（LY）客户呼入大龙猫组",attr: "1"},
            {superno: "03003",sdate: "20110101",lvl: "3",orgno: "03051",bName: "（LY）客户呼入大坤坤组",cname: "（LY）客户呼入大坤坤组",attr: "1"},
            {superno: "03003",sdate: "20110101",lvl: "3",orgno: "03061",bName: "（LY）客户呼入大蛤蟆组",cname: "（LY）客户呼入大蛤蟆组",attr: "1"},


            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80997",bName: "寿险客服中心",cname: "寿险客服中心",attr: "0"},
            {superno: "80997",sdate: "20110101",lvl: "2",orgno: "04001",bName: "刘备团队",cname: "刘备团队",attr: "1"},
            {superno: "04001",sdate: "20110101",lvl: "3",orgno: "04011",bName: "（LY）客户呼入关羽组",cname: "（LY）客户呼入关羽组",attr: "1"},
            {superno: "04001",sdate: "20110101",lvl: "3",orgno: "04021",bName: "（LY）客户呼入张飞组",cname: "（LY）客户呼入张飞组",attr: "1"},
            {superno: "04001",sdate: "20110101",lvl: "3",orgno: "04031",bName: "（LY）客户呼入赵云组",cname: "（LY）客户呼入赵云组",attr: "1"},
            
            {superno: "80997",sdate: "20110101",lvl: "2",orgno: "04002",bName: "曹操团队",cname: "曹操团队",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04012",bName: "（LY）客户呼入典韦组",cname: "（LY）客户呼入典韦组",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04022",bName: "（LY）客户呼入徐晃组",cname: "（LY）客户呼入徐晃组",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04032",bName: "（LY）客户呼入张辽组",cname: "（LY）客户呼入张辽组",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04042",bName: "（LY）客户呼入夏侯组",cname: "（LY）客户呼入夏侯组",attr: "1"},

            {superno: "80997",sdate: "20110101",lvl: "2",orgno: "04003",bName: "孙权团队",cname: "孙权团队",attr: "0"},
            {superno: "04003",sdate: "20110101",lvl: "3",orgno: "04041",bName: "（LY）客户呼入太史慈组",cname: "（LY）客户呼入太史慈组",attr: "1"},
            {superno: "04003",sdate: "20110101",lvl: "3",orgno: "04051",bName: "（LY）客户呼入甘宁组",cname: "（LY）客户呼入甘宁组",attr: "1"},
            {superno: "04003",sdate: "20110101",lvl: "3",orgno: "04061",bName: "（LY）客户呼入周瑜组",cname: "（LY）客户呼入周瑜组",attr: "1"},

            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80996",bName: "银行客服中心",cname: "银行客服中心",attr: "0"},
           ],
      brnoList1: [
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8000",bName: "洛阳",cname: "洛阳",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8001",bName: "上海",cname: "上海",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8002",bName: "北京",cname: "北京",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8003",bName: "重庆",cname: "重庆",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8004",bName: "西安",cname: "西安",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8005",bName: "广州",cname: "广州",attr: "0"},
      ],
      brnoList2: [
        {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8000",bName: "客户线呼入",cname: "客户线呼入",attr: "0"},
      ],
      data: [
        [0,'曹杰', '1%', "../../../../static/images/image/ljtx.png"],
        [1,'刘艳', '2%', "../../../../static/images/image/ljtx.png"],
        [2,'张丽', '3%', "../../../../static/images/image/ljtx.png"],
        [3,'王妃', '4%', "../../../../static/images/image/ljtx.png"],
        [4,'杨龙', '2%', "../../../../static/images/image/ljtx.png"],
        [5,'张杰', '2%', "../../../../static/images/image/ljtx.png"],
        [6,'李娜', '2%', "../../../../static/images/image/ljtx.png"],
        [7,'杨聪', '10%', "../../../../static/images/image/hjts.png"],
        [8,'李长娣', '2%', "../../../../static/images/image/hjts.png"],
        [9,'刘凯旋', '2%', "../../../../static/images/image/hjts.png"],
      ],
    }
  },
  mounted() {
    this.draw1();
    // this.draw2(),
    this.brnoList = toolBox.formatTreeData(
          this.brnoList,
          "orgno",
          "superno"
    );
  },
  watch: {
  },
  methods: {
    detail() {
      this.dialogOptionsB.isShow = true;
      this.dialogOptionsB.title = "绩效排名";
    },
    handleClick(val) {
      // this.activeName2 = val;
      if(this.activeName2 == "second"){
        this.draw1();
      } else if(this.activeName2 == "third") {
        this.draw2();
        this.draw5();
        this.draw6();
      }
      
    },
    handleClick1(val) {
      if(this.switch3 == '1') {
        this.draw1();
      } else if(this.switch3 == '2') {
        this.draw3();
      } else if(this.switch3 == '3') {
        this.draw4();
      }
    },
    handleClick2(val) {
      if(this.switch4 == '1') {
        this.draw2();
      } else if(this.switch4 == '2') {
        this.draw3();
      } else if(this.switch4 == '3') {
        this.draw4();
      }
    },
    handleClick3(val) {
      if(this.switch5 == '1') {
        this.draw5();
      } else if(this.switch5 == '2') {
        this.draw3();
      } else if(this.switch5 == '3') {
        this.draw4();
      }
    },
    handleClick4(val) {
      if(this.switch6 == '1') {
        this.draw6();
      } else if(this.switch6 == '2') {
        this.draw3();
      } else if(this.switch6 == '3') {
        this.draw4();
      }
    },
    draw1() {
      var myHexagon = echarts.init(this.$refs.myHexagon);
      myHexagon.setOption({
        xAxis:{
          data:[
             '12/12','12/13','12/14','12/15','12/16','12/17','12/18','12/19','12/20','12/21','12/22','12/23','12/24','12/25'
          ],
          // boundaryGap:false,
          // showMaxLabel:false,
          // show: false
          axisLine: {
            show: false
          }
        },
        yAxis: [
          {
            type:'value',
            min: 120,
            name: 'min',
            position: 'left',
            axisLine: {
              show: false
            }
          },
          {
            type:'value',
            // min: -100,
            name: '%',
            position: 'right',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],
        legend: {
          data:['目标值', '上期达成', 'AHT', '达标比', '同比增长率']
        },
        tooltip:{
          show:true,
          trigger:'axis',
        },
        series: [
          {
            name:'目标值',
            type:'line',
            // symbol:'none',
            areaStyle: {
              color: '#fffacd'
            },
            color:'#40e0d0',
            data:['170','170','170','170','170','170','170','170','170','170','170','170','170','170']
          },
            {
            name:'上期达成',
            type:'line',
            // symbol:'none',
            color:'#adff2f',
            data:['168','170','165','168','168','165','155','172','170','168','165','155','168','168']
          },
          {
            name:'AHT',
            type:'line',
            symbol:'roundRect',
            color:'#ffa500',
            data:['168','165','169','0','0','168','170','165','168','170','179','175','178','180']
          },
          {
            name:'达标比',
            type:'line',
            yAxisIndex: 1,
            // symbol:'none',
            color:'#1e90ff',
            data:['98.8','97.1','99.4','0','0','98.8','100','97.1','98.8','100','105.3','102.9','104.7','105.9']
          },
          {
            name:'同比增长率',
            type:'line',
            yAxisIndex: 1,
            // symbol:'none',
            color:'#9900ff',
            data:['0','-3','2','-100','-100','2','10','-4','-1','1','8','13','6','7']
          }
        ]
        
      });

      var myChart = echarts.init(this.$refs.myChart);
      myChart.setOption({
        // title: {
        //   text: '平均处理时长'
        // },
        xAxis: {
          data: ['0-20', '20-40', '40-60', '60-80', '80-100', '100-120', '120-140', '140-160', '160-180', '180-200', '200+']
        },
        yAxis: {
          name: '数量',
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            barWidth: '100%',
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            itemStyle: {
              normal: {
                color: function(param) {
                  var colorList = [
                    '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#ff0000', '#ff0000', '#ff0000'
                  ];
                  return colorList[param.dataIndex];
                }
              }
            },
            data: ['2', '0', '7', '13', '18', '27', '18', '16', '14', '0', '2']
          }
        ]
      });
      var myChart1 = echarts.init(this.$refs.myChart1);
      myChart1.setOption({
        xAxis: {
          data: ['曹杰', '刘艳', '张丽', '王妃', '杨龙', '张杰', '李娜', '杨聪', '李长娣', '刘凯旋']
        },
        yAxis: 
        // [
          {
          name: 'min',
          type: 'value'
          },
        //   {
        //     axisLine: {show: false},
        //     axisTick: {show: false},
        //     axisLabel: {show: false},
        //     splitLine: {show: false}
        //   }
        // ],
        tooltip:{
          show:true,
          trigger:'axis',
        },
        legend: {
          show: true,
          // orient: "horizontal",
          
          x: "right",
          y: 'bottom',
          data:[ '2017-12-23', '2017-12-24', {name: '相对变动率', icon: 'image://../../../../static/images/image/arrow.png'}]//,
        },
        series: [
          {
            name: '2017-12-23',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#eeb422'
              }
            },
            data: ['5.5', '4.5', '4', '5.8', '6.2', '5.5', '5.6', '6.3', '5.5', '5.8']
          },
          {
            name: '2017-12-24',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#00bfff'
              }
            },
            data: ['7', '7.2', '6.8', '4.8', '5.5', '6.4', '4.5', '5', '5.2', '4.8']
          },
          {
            name: '目标值',
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00cd00'
              }
            },
            data: ['5', '5', '5', '5', '5', '5', '5', '5', '5', '5']
          },
          {
            name: '相对变动率',
            type: 'custom',
            renderItem: function(params, api) {
              var point = api.coord([api.value(0),0]);
              // console.log('point',point)
              return {
                type: 'group',
                children: [
                  {
                    type: 'image',
                    style: {
                      image: api.value(3),
                      x: 12,
                      y: -25/2,
                      // width: 10,

                    },
                    position: [point[0], 21],
                  },
                  {
                    type: 'text',
                    style: {
                      text: api.value(2),
                      textFont: api.font({fontSize:12}),
                      textAlign: 'center',
                      textVerticalAlign: 'bottom'
                    },
                    position: [point[0], 20],
                  }
                ]
              }
            },
            data: this.data,
          }
        ]
      });
      
    },
    draw3() {
      var myChart11 = echarts.init(this.$refs.myChart11);
      myChart11.setOption({
        xAxis: {
          data: ['曹杰', '刘艳', '张丽', '王妃', '杨龙', '张杰', '李娜', '杨聪', '李长娣', '刘凯旋']
        },
        yAxis: 
        // [
          {
          name: 'min',
          type: 'value'
          },
        //   {
        //     axisLine: {show: false},
        //     axisTick: {show: false},
        //     axisLabel: {show: false},
        //     splitLine: {show: false}
        //   }
        // ],
        tooltip:{
          show:true,
          trigger:'axis',
        },
        legend: {
          show: true,
          // orient: "horizontal",
          
          x: "right",
          y: 'bottom',
          data:[ '2017-12-23', '2017-12-24', {name: '相对变动率', icon: 'image://../../../../static/images/image/arrow.png'}]//,
        },
        series: [
          {
            name: '2017-12-23',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#eeb422'
              }
            },
            data: ['0', '4.5', '4', '0', '0', '0', '0', '0', '0', '0']
          },
          {
            name: '2017-12-24',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#00bfff'
              }
            },
            data: ['7', '7.2', '6.8', '4.8', '5.5', '6.4', '4.5', '5', '5.2', '4.8']
          },
          {
            name: '目标值',
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00cd00'
              }
            },
            data: ['5', '5', '5', '5', '5', '5', '5', '5', '5', '5']
          },
          {
            name: '相对变动率',
            type: 'custom',
            renderItem: function(params, api) {
              var point = api.coord([api.value(0),0]);
              // console.log('point',point)
              return {
                type: 'group',
                children: [
                  {
                    type: 'image',
                    style: {
                      image: api.value(3),
                      x: 12,
                      y: -25/2,
                      // width: 10,

                    },
                    position: [point[0], 21],
                  },
                  {
                    type: 'text',
                    style: {
                      text: api.value(2),
                      textFont: api.font({fontSize:12}),
                      textAlign: 'center',
                      textVerticalAlign: 'bottom'
                    },
                    position: [point[0], 20],
                  }
                ]
              }
            },
            data: this.data,
          }
        ]
      });
    },
    draw4() {
      var myChart12 = echarts.init(this.$refs.myChart12);
      myChart12.setOption({
        xAxis: {
          data: ['曹杰', '刘艳', '张丽', '王妃', '杨龙', '张杰', '李娜', '杨聪', '李长娣', '刘凯旋']
        },
        yAxis: 
        // [
          {
          name: 'min',
          type: 'value'
          },
        //   {
        //     axisLine: {show: false},
        //     axisTick: {show: false},
        //     axisLabel: {show: false},
        //     splitLine: {show: false}
        //   }
        // ],
        tooltip:{
          show:true,
          trigger:'axis',
        },
        legend: {
          show: true,
          // orient: "horizontal",
          
          x: "right",
          y: 'bottom',
          data:[ '2017-12-23', '2017-12-24', {name: '相对变动率', icon: 'image://../../../../static/images/image/arrow.png'}]//,
        },
        series: [
          {
            name: '2017-12-23',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#eeb422'
              }
            },
            data: ['5.5', '0', '0', '5.8', '6.2', '5.5', '5.6', '6.3', '5.5', '5.8']
          },
          {
            name: '2017-12-24',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#00bfff'
              }
            },
            data: ['7', '7.2', '6.8', '4.8', '5.5', '6.4', '4.5', '5', '5.2', '4.8']
          },
          {
            name: '目标值',
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00cd00'
              }
            },
            data: ['5', '5', '5', '5', '5', '5', '5', '5', '5', '5']
          },
          {
            name: '相对变动率',
            type: 'custom',
            renderItem: function(params, api) {
              var point = api.coord([api.value(0),0]);
              // console.log('point',point)
              return {
                type: 'group',
                children: [
                  {
                    type: 'image',
                    style: {
                      image: api.value(3),
                      x: 12,
                      y: -25/2,
                      // width: 10,

                    },
                    position: [point[0], 21],
                  },
                  {
                    type: 'text',
                    style: {
                      text: api.value(2),
                      textFont: api.font({fontSize:12}),
                      textAlign: 'center',
                      textVerticalAlign: 'bottom'
                    },
                    position: [point[0], 20],
                  }
                ]
              }
            },
            data: this.data,
          }
        ]
      });
    },
    draw2() {
      
      var myChart2 = echarts.init(this.$refs.myChart2);
      myChart2.setOption({
        xAxis:{
          data:[
             '2017/12/17','2017/12/18','2017/12/19','2017/12/20','2017/12/21','2017/12/22','2017/12/23','2017/12/24'
          ],
          // boundaryGap:false,
          // showMaxLabel:false,
          // show: false
          axisLine: {
            show: false
          }
        },
        yAxis: {
            type:'value',
            // min: 120,
            name: 'min',
            position: 'left',
            axisLine: {
              show: false
            }
        },
        legend: {
          data:['件均处理时长', '平均通话时长', '平均案面处理时长']
        },
        tooltip:{
          show:true,
          trigger:'axis',
        },
        series: [
          {
            name:'件均处理时长',
            type:'line',
            // symbol:'none',
            areaStyle: {
              color: '#fffacd'
            },
            color:'#40e0d0',
            data:['10','10','10','10','10','10','10','10']
          },
            {
            name:'平均通话时长',
            type:'line',
            // symbol:'none',
            color:'#adff2f',
            data:['8','10','11','3','6','7','8','9']
          },
          {
            name:'平均案面处理时长',
            type:'line',
            // symbol:'roundRect',
            color:'#ffa500',
            data:['6','6','5','8','9','3','6','8']
          }
        ]
        
      });

      var myChart3 = echarts.init(this.$refs.myChart3);
      myChart3.setOption({
        // title: {
        //   text: '平均处理时长'
        // },
        xAxis: {
          data: ['0-1', '1-2', '2-3', '3-4', '4-5', '5-6', '6-7', '7-8', '8-9', '9-10', '10+']
        },
        yAxis: {
          name: '数量',
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            barWidth: '100%',
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            itemStyle: {
              normal: {
                color: function(param) {
                  var colorList = [
                    '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#ff0000', '#ff0000', '#ff0000', '#ff0000', '#ff0000'
                  ];
                  return colorList[param.dataIndex];
                }
              }
            },
            data: ['2', '0', '7', '13', '18', '27', '18', '16', '14', '0', '2']
          },
          {
            type: 'line',
            itemStyle: {
              normal: {
                color: '#32cd32'
              }
            },
            symbol: 'none',
            data: [['5-6', 0], ['5-6', 5], ['5-6', 10], ['5-6', 15], ['5-6', 20], ['5-6', 25], ['5-6', 30]]
          }
        ]
      });
      var myChart4 = echarts.init(this.$refs.myChart4);
      myChart4.setOption({
        xAxis: {
          data: ['曹杰', '刘艳', '张丽', '王妃', '杨龙', '张杰', '李娜', '杨聪', '李长娣', '刘凯旋']
        },
        yAxis: {
          name: 'min',
          type: 'value'
        },
        tooltip:{
          show:true,
          trigger:'axis',
        },
        legend: {
          x: "right",
          y: 'bottom',
          data:[ '2017-12-23', '2017-12-24', {name: '相对变动率', icon: 'image://../../../../static/images/image/arrow.png'}]
        },
        series: [
          {
            name: '2017-12-23',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#eeb422'
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            data: ['5.5', '4.5', '4', '5.8', '6.2', '5.5', '5.6', '6.3', '5.5', '5.8']
          },
          {
            name: '2017-12-24',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#00bfff'
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            data: ['7', '7.2', '6.8', '4.8', '5.5', '6.4', '4.5', '5', '5.2', '4.8']
          },
          {
            name: '目标值',
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00cd00'
              }
            },
            data: ['5', '5', '5', '5', '5', '5', '5', '5', '5', '5']
          },
          {
            name: '相对变动率',
            type: 'custom',
            renderItem: function(params, api) {
              var point = api.coord([api.value(0),0]);
              // console.log('point',point)
              return {
                type: 'group',
                children: [
                  {
                    type: 'image',
                    style: {
                      image: api.value(3),
                      x: 12,
                      y: -25/2,
                    },
                    position: [point[0], 21],
                  },
                  {
                    type: 'text',
                    style: {
                      text: api.value(2),
                      textFont: api.font({fontSize:12}),
                      textAlign: 'center',
                      textVerticalAlign: 'bottom'
                    },
                    position: [point[0], 20],
                  }
                ]
              }
            },
            data: this.data,
          }
        ]

      });
    },
    draw5(){
      var myChart5 = echarts.init(this.$refs.myChart5);
      myChart5.setOption({
        // title: {
        //   text: '平均处理时长'
        // },
        xAxis: {
          data: ['0-1', '1-2', '2-3', '3-4', '4-5', '5-6', '6-7', '7-8', '8-9', '9-10', '10+']
        },
        yAxis: {
          name: '数量',
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            barWidth: '100%',
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            itemStyle: {
              normal: {
                color: function(param) {
                  var colorList = [
                    '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#9acd32', '#ff0000', '#ff0000', '#ff0000'
                  ];
                  return colorList[param.dataIndex];
                }
              }
            },
            data: ['2', '0', '7', '13', '18', '21', '18', '16', '14', '0', '2']
          },
          {
            type: 'line',
            itemStyle: {
              normal: {
                color: '#32cd32'
              }
            },
            symbol: 'none',
            data: [['7-8', 0], ['7-8', 5], ['7-8', 10], ['7-8', 15], ['7-8', 20], ['7-8', 25]]
          }
        ]
      });
      var myChart6 = echarts.init(this.$refs.myChart6);
      myChart6.setOption({
        xAxis: {
          data: ['曹杰', '刘艳', '张丽', '王妃', '杨龙', '张杰', '李娜', '杨聪', '李长娣', '刘凯旋']
        },
        yAxis: {
          name: 'min',
          type: 'value'
        },
        tooltip:{
          show:true,
          trigger:'axis',
        },
        legend: {
          x: "right",
          y: 'bottom',
          data:[ '2017-12-23', '2017-12-24', {name: '相对变动率', icon: 'image://../../../../static/images/image/arrow.png'}]
        },
        series: [
          {
            name: '2017-12-23',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#eeb422'
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            data: ['5.5', '4.5', '4', '5.8', '6.2', '5.5', '5.6', '6.3', '5.5', '5.8']
          },
          {
            name: '2017-12-24',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#00bfff'
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            data: ['7', '7.2', '6.8', '4.8', '5.5', '6.4', '4.5', '5', '5.2', '4.8']
          },
          {
            name: '目标值',
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00cd00'
              }
            },
            data: ['5', '5', '5', '5', '5', '5', '5', '5', '5', '5']
          },
          {
            name: '相对变动率',
            type: 'custom',
            renderItem: function(params, api) {
              var point = api.coord([api.value(0),0]);
              // console.log('point',point)
              return {
                type: 'group',
                children: [
                  {
                    type: 'image',
                    style: {
                      image: api.value(3),
                      x: 12,
                      y: -25/2,
                    },
                    position: [point[0], 21],
                  },
                  {
                    type: 'text',
                    style: {
                      text: api.value(2),
                      textFont: api.font({fontSize:12}),
                      textAlign: 'center',
                      textVerticalAlign: 'bottom'
                    },
                    position: [point[0], 20],
                  }
                ]
              }
            },
            data: this.data,
          }
        ]

      })
    },
    draw6(){
      var myChart7 = echarts.init(this.$refs.myChart7);
      myChart7.setOption({
        // title: {
        //   text: '平均处理时长'
        // },
        xAxis: {
          data: ['0-1', '1-2', '2-3', '3-4', '4-5', '5-6', '6-7', '7-8', '8-9', '9-10', '10+']
        },
        yAxis: {
          name: '数量',
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            barWidth: '100%',
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            itemStyle: {
              normal: {
                color: function(param) {
                  var colorList = [
                    '#9acd32', '#9acd32', '#ff0000', '#ff0000', '#ff0000', '#ff0000', '#ff0000', '#ff0000', '#ff0000', '#ff0000', '#ff0000'
                  ];
                  return colorList[param.dataIndex];
                }
              }
            },
            data: ['2', '0', '7', '13', '18', '21', '18', '16', '14', '0', '3']
          },
          {
            type: 'line',
            itemStyle: {
              normal: {
                color: '#32cd32'
              }
            },
            symbol: 'none',
            data: [['1-2', 0], ['1-2', 5], ['1-2', 10], ['1-2', 15], ['1-2', 20], ['1-2', 25]]
          }
        ]
      });
      var myChart8 = echarts.init(this.$refs.myChart8);
      myChart8.setOption({
        xAxis: {
          data: ['曹杰', '刘艳', '张丽', '王妃', '杨龙', '张杰', '李娜', '杨聪', '李长娣', '刘凯旋']
        },
        yAxis: {
          name: 'min',
          type: 'value'
        },
        tooltip:{
          show:true,
          trigger:'axis',
        },
        legend: {
          x: "right",
          y: 'bottom',
          data:[ '2017-12-23', '2017-12-24', {name: '相对变动率', icon: 'image://../../../../static/images/image/arrow.png'}]
        },
        series: [
          {
            name: '2017-12-23',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#eeb422'
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            data: ['5.5', '4.5', '4', '5.8', '6.2', '5.5', '5.6', '6.3', '5.5', '5.8']
          },
          {
            name: '2017-12-24',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                color: '#00bfff'
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#000'
            },
            data: ['7', '7.2', '6.8', '4.8', '5.5', '6.4', '4.5', '5', '5.2', '4.8']
          },
          {
            name: '目标值',
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#00cd00'
              }
            },
            data: ['5', '5', '5', '5', '5', '5', '5', '5', '5', '5']
          },
          {
            name: '相对变动率',
            type: 'custom',
            renderItem: function(params, api) {
              var point = api.coord([api.value(0),0]);
              // console.log('point',point)
              return {
                type: 'group',
                children: [
                  {
                    type: 'image',
                    style: {
                      image: api.value(3),
                      x: 12,
                      y: -25/2,
                    },
                    position: [point[0], 21],
                  },
                  {
                    type: 'text',
                    style: {
                      text: api.value(2),
                      textFont: api.font({fontSize:12}),
                      textAlign: 'center',
                      textVerticalAlign: 'bottom'
                    },
                    position: [point[0], 20],
                  }
                ]
              }
            },
            data: this.data,
          }
        ]

      });


    }
    // renderWeather(param, api){

    // }
  }
}
</script>
<style lang="scss">
.dashboard-editor-container {
  padding: 5px 0 35px 0;
  margin-left: auto;
  margin-top: auto;
  background-color: rgb(240, 242, 245);
  .chart-wrapper1 {
    padding: 17px 16px 0;
  }
};
// .left-col {
//     height: 100%;
//     background: #ffffff;
//     margin-top: 10px;

//   };
.main {
  margin-bottom: 5px;
  height: 100%;
  background: #f0f2f5;
  // .total-col {
  //   width:97.4%;
  //   // height: 100%;
  //   background: #ffffff;
};
.myHexagon {
  width: 100%;
  height: 400px;
  // padding-top: 3px;
  margin: 0px auto;
}
.myHexagon1 {
  width: 100%;
  height: 310px;
  margin: 0px auto;
}
.radio_show {

  .el-radio__label {
    padding-left: 0px
  }
  .el-radio + .el-radio {
    margin-left: 7px;
  }
  .el-radio__label {
    font-size: 12px;
  }
  .el-button .el-button__contain {
      padding: 12px 0px;
  }
}
</style>
